<template>
	<scroll-view class="pointslist" scroll-y="true">
	<view class="books-details">
		<view class="book-detail">
			<view class="detail-left">
				<image class="book-img" :src="detail.cover" />
			</view>
		</view>
		<view class="detail-right">
			<view class="detail-right-box">
				<view class="title">{{detail.title}}</view>
				<view class="author">{{detail.author}}</view>
			</view>
		</view>
		<view class="book-jieshao">
			<!-- <u-read-more ref="uReadMore" text-indent="0" close-text="展开阅读" color="#3ebcc8" :shadow-style="shadowStyle" :show-height="150" :toggle="true">
				<u-parse :html="detail.description" @load="parseLoaded"></u-parse>
			</u-read-more> -->
			<view :class="is_show ? 'new_jiesha' : 'work_jiesha'" v-html="detail.description"></view>
			<view style="display: flex;align-items: center;justify-content: flex-end;" @click="is_show=!is_show">
				{{word}}
				<image v-if="is_show == false" src="../../image/icon_sj.png" style="width: 50upx;height: 50upx;"></image>
				<image v-if="is_show == true" src="../../image/icon_sj_up.png" style="width: 50upx;height: 50upx;"></image>
			</view>
		</view>
		<view class="catalogue-box" @click="getMenu(detail.title)">
			<view class="catalogue-left">
				<image src="../../image/meun.png" style="width: 1.6rem;height: 1.6rem;margin-top: 0.2rem;"></image>
				<text>目录</text>
			</view>
			<!-- <view class="catalogue-centre">{{MeunList.key}}  {{MeunList_text}}</view> -->
			<view class="catalogue-right">
				<image src="../../image/icon_right.png" style="width: 1.2rem;height: 1.2rem;"></image>
			</view>
		</view>
		<!--  -->
		<view class="btn-box">
			<view class="readBtn" @click="getRead(detail.title)">开始阅读</view>
			<!-- <view class="joinBtn">加入书架</view> -->
		</view>
	</view>
	</scroll-view>
</template>

<script>
	import { getbookdetail,getbookcata } from '../../api/home.js'
	import {getshare } from '../../api/auth.js'
	var jweixin = require('jweixin-module');
	export default {
		data() {
			return {
				title:"",
				desc:"",
				cover:"",
				bookId:'',
				articleId:'',
				is_show:false,
				detail:{},
				MeunList:{},
				MeunList_text:'',
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				}
			}
		},
		computed: {
		    // 项目内容
		    word() {
		      if (this.is_show === false) {
		        return 
		      } else if (this.is_show === true) {
		        return
		      } else if (this.is_show === '') {
		        return null
		      }
		    },
		},
		onShow: function() {
			document.title = window.localStorage.getItem('Title')
			uni.setNavigationBarTitle({
				title:window.localStorage.getItem('Title')
			})
		},
		mounted() {
			// alert( document.body.clientWidth)
			// alert( document.body.clientHeight)
			this.bookId = this.$Route.query.bookId
			document.title = window.localStorage.getItem('Title')
			var parem = {
				book_id:this.bookId
			}
			getbookdetail(parem).then(res =>{
				this.detail = res.data
				this.title = res.data.title
				this.desc = res.data.description
				this.cover = res.data.cover
				uni.setNavigationBarTitle({
					title:res.data.title
				})
				window.localStorage.setItem('Title',res.data.title)
				document.title = res.data.title

				// 设置分享内容
				this.setShareData()
			})
			getbookcata(parem).then(res =>{
				console.log(res.data[0].data[0].article_id)
				this.MeunList = res.data[0]
				this.articleId = res.data[0].data[0].article_id
				// this.MeunList_text = res.data[0].data[0].title
			})
		},
		methods: {
			// 更新分享内容
			setShareData(e){
				console.log("获取图书详情，初始化分享内容")
				var url = window.location.href
				var Imgsrc = this.cover
				var Title = this.title
				var Desc = this.desc
				let param = {url:url}
				getshare(param).then(res => {
					jweixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名，见附录1
						jsApiList: res.data.jsApiList,// 所有要调用的 API 都要加到这个列表中
					});
					jweixin.ready(function() { // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
						//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

						jweixin.updateAppMessageShareData({
							title: Title, // 分享标题
							desc: '泰康保险集团品牌传播部出品', // 分享描述
							link: url, // 分享链接
							imgUrl: Imgsrc, // 分享图标
							success: function() {
								// 用户确认分享后执行的回调函数
							},
							cancel: function() {
								// 用户取消分享后执行的回调函数
							}
						});
						//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0） 用户id分为两个字段
						jweixin.updateTimelineShareData({
							title:Title, // 分享标题
							link: url, // 分享链接
							imgUrl: Imgsrc, // 分享图标
							success: function() {
								// 用户确认分享后执行的回调函数
							},
							cancel: function() {
								// 用户取消分享后执行的回调函数
							}
						});
					});
					jweixin.error(function(res){
						//console.log(res,'wxJSAPI.error')
					});
				})
			},
			parseLoaded() {
				this.$refs.uReadMore.init();
			},
			getRead(data) {
				// uni.setNavigationBarTitle({ title: data })
				this.$Router.push({name: 'bookRead',params: {bookId: this.bookId,articleId:this.articleId,title:data}})
			},
			getMenu(data){
				// uni.setNavigationBarTitle({ title: data })
				this.$Router.push({name:'bookMenu',params: {bookId: this.bookId,title:data}})
			},
			rateBtn(value) {
				console.log(value)
			},
			iconActive(){
				this.iconOFF =! this.iconOFF
			}
		},
		destroyed(){
			console.log("组件销毁，重新初始化分享内容")
			// 还原分享配置
			var url = window.location.href 
			var Imgsrc = 'https://ebook.taikang.com/static/images/share.jpg'
			let param = {url:url}
			getshare(param).then(res => {
				jweixin.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: res.data.appId, // 必填，公众号的唯一标识
					timestamp: res.data.timestamp, // 必填，生成签名的时间戳
					nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
					signature: res.data.signature, // 必填，签名，见附录1
					jsApiList: res.data.jsApiList,// 所有要调用的 API 都要加到这个列表中
				});
				jweixin.ready(function() { // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
					//自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

					jweixin.updateAppMessageShareData({
						title: window.localStorage.getItem('Title'), // 分享标题
						desc: '泰康保险集团品牌传播部出品', // 分享描述
						link: url, // 分享链接
						imgUrl: Imgsrc, // 分享图标
						success: function() {
							// 用户确认分享后执行的回调函数
						},
						cancel: function() {
							// 用户取消分享后执行的回调函数
						}
					});
					//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0） 用户id分为两个字段
					jweixin.updateTimelineShareData({
						title:window.localStorage.getItem('Title'), // 分享标题
						link: url, // 分享链接
						imgUrl: Imgsrc, // 分享图标
						success: function() {
							// 用户确认分享后执行的回调函数
						},
						cancel: function() {
							// 用户取消分享后执行的回调函数
						}
					});
				});
				jweixin.error(function(res){
					//console.log(res,'wxJSAPI.error')
				});
			})
		}
	}
</script>

<style scoped lang="scss">
	@media screen and (min-height:504px) { 
		.book-detail {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-image: url(../../image/detail_img.jpg);
			background-size: 100% 100%;
			height: 12rem;
			.detail-left {
				height: 11rem;
				.book-img {
					width: 7rem;
					height: 9.5rem;
				}
			}
		}
	}
	@media screen and (min-height:603px) {
		.book-detail {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-image: url(../../image/detail_img.jpg);
			background-size: 100% 100%;
			height: 16rem;
			.detail-left {
				height: 13.5rem;
				.book-img {
					width: 9rem;
					height: 12rem;
				}
			}
		}
	}
	@media screen and (min-height:672px) {
		.book-detail {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-image: url(../../image/detail_img.jpg);
			background-size: 100% 100%;
			height: 20rem;
			.detail-left {
				height: 15rem;
				.book-img {
					width: 10rem;
					height: 14rem;
				}
			}
		}
	}
	@media screen and (min-height:721px) {
		.book-detail {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-image: url(../../image/detail_img.jpg);
			background-size: 100% 100%;
			height: 23rem;
			.detail-left {
				height: 14rem;
				.book-img {
					width: 10rem;
					height: 14.5rem;
				}
			}
		}
	}
	@media screen and (height:804px) {
		.book-detail {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-image: url(../../image/detail_img.jpg);
			background-size: 100% 100%;
			height: 26rem;
			.detail-left {
				height: 14rem;
				.book-img {
					width: 11rem;
					height: 15.5rem;
				}
			}
		}
	}
	@media screen and (height:808px) {
		.book-detail {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-image: url(../../image/detail_img.jpg);
			background-size: 100% 100%;
			height: 27rem;
			.detail-left {
				height: 10rem;
				.book-img {
					width: 10rem;
					height: 14.5rem;
				}
			}
		}
	}
	.pointslist{background: #FFFFFF;width: 100%;height:calc(100vh - 1rpx);}
	.books-details{
		padding-bottom: 1rem;
	}
	// .book-detail {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	flex-direction: column;
	// 	background-image: url(../../image/detail_img.jpg);
	// 	background-size: 100% 100%;
	// 	height: 23rem;
	// 	.detail-left {
	// 		height: 14rem;
	// 		.book-img {
	// 			width: 10rem;
	// 			height: 14.5rem;
	// 		}
	// 	}
	// }
	.detail-right {
		.detail-right-box {
			height: calc(100% - 64upx);
			text-align: center;
			border-bottom: 1px solid #bfbfbf;
		}
		.title {
			font-size: 1.6rem;
			color: #dda76d;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.author {
			font-size: 1rem;
			color: #dda76d;
			margin-top: 4upx;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			padding-bottom: 20upx;
		}
	}
	.btn-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 2rem;
		.readBtn {
			background-color: #3ebcc8;
			border: 1px solid #3ebcc8;
			display: inline-block;
			height: 90upx;
			line-height: 90upx;
			border-radius: 4upx;
			color: #fff;
			cursor: pointer;
			font-size: 30upx;
			text-align: center;
			width: 55%;
			border-radius: 10upx;
		}
		.readBtn:active{
			
		}
		.joinBtn {
			border: 1px solid $dominantHue;
			color: $dominantHue;
			padding: 0 29upx;
			height: 64upx;
			line-height: 64upx;
			display: inline-block;
			border-radius: 4upx;
			cursor: pointer;
			font-size: 28upx;
		}
	}
	.book-jieshao {
		padding: 30upx 20upx 0upx 20upx;
		overflow: hidden;
		.work_jiesha {
			width: 100% ;
			word-wrap: break-word;
			color: $mediumGrey;
			line-height: 50upx;
			font-size: 31upx;
			height: 150upx;
			overflow: hidden;
		}
		.new_jiesha {
			width: 100% ;
			word-wrap: break-word;
			color: $mediumGrey;
			line-height: 50upx;
			font-size: 31upx;
		}
	}
	.catalogue-box {
		padding: 1rem;
		border-radius: 4upx;
		font-size: 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 0.3rem solid #F5F5F5;
		border-bottom: 0.3rem solid #F5F5F5;
		.catalogue-left {
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			text{
				font-size: 34upx;
				color: #333333;
			}
		}
		.catalogue-centre {
			font-size: 0.8rem;
			color: #999999;
			font-weight: bold;
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			margin-left: 0.5rem;
		}
	}
	.review {
		.review-head {
			font-size: 32upx;
			font-weight: 700;
			margin-bottom: 30upx;
		}
	
		.review-input {
			$review: 84upx;
			height: $review;
			border-radius: 8upx;
			border: 1px solid $dominantHue;
			margin-bottom: 60upx;
			input {
				height: $review - 2upx;
				line-height: $review - 2upx;
				padding: 0 20upx;
				float: left;
				width: calc(100% - 112upx);
				font-size: 28upx;
				box-sizing:border-box;
			}
	
			.review-btn {
				float: right;
				height: $review - 2upx;
				line-height: $review - 2upx;
				width: 112upx;
				background-color: $dominantHue;
				text-align: center;
	
				.send {
					color: #fff;
					font-size: 48upx;
				}
			}
		}
	}
	.review-list{
		.review-box{
			$imgWidth:96upx;
			padding-bottom: 40upx;
			.user-message{
				$userH:76upx;
				display: flex;
				height: $userH;
				.message-img{
					flex: 1;
					height: $userH;
					min-width: $imgWidth;
					max-width: $imgWidth;
					.user-img{
						width: $userH;
						height: $userH;
						border-radius: 50%;
						background-color: $skeletonColor;
					}
				}
				.message-name{
					flex: 1;
					.head{
						font-size: 28upx;
						height: 44upx;
					}
					.star{
						height: 38upx;
						padding-top: 2upx;
					}
				}
				.message-praise{
					flex: 1;
					line-height: $userH - 20upx;
					min-width: 40upx;
					max-width: 40upx;
					text-align: right;
					padding: 10upx 0;
					.icon-active{
						.love{
							color: $redAll;
						}
					}
					.love{
						font-size: 34upx;
						color: #A3B0C0;
					}
				}
				
			}
			.con-tent{
				
				padding:14upx 0 0 $imgWidth;
				.text{
					word-wrap : break-word;
					font-size: 26upx;
					line-height: 40upx;
					color: $mediumGrey;
				}
				.time{
					padding: 10upx 0 0 0;
					color: $lightGray;
					font-size: 24upx;
				}
			}
	
		}
	}
</style>
